<section class="listing-container">
  <section class="listing-photos">
    <main>
      <div
        [ngClass]="{ 'loading-background': isLoading() }"
        [ngStyle]="{ 'background-image': 'url(/assets/images/' + listing().photos[0] + ')' }"
        alt="Main listing photo"
      ></div>
    </main>
    <aside>
      <div
        [ngClass]="{ 'loading-background': isLoading() }"
        [ngStyle]="{ 'background-image': 'url(/assets/images/' + listing().photos[1] + ')' }"
        alt="Listing photo #1"
      ></div>
      <div
        [ngClass]="{ 'loading-background': isLoading() }"
        [ngStyle]="{ 'background-image': 'url(/assets/images/' + listing().photos[2] + ')' }"
        alt="Listing photo #2"
      ></div>
      <div
        [ngClass]="{ 'loading-background': isLoading() }"
        [ngStyle]="{ 'background-image': 'url(/assets/images/' + listing().photos[3] + ')' }"
        alt="Listing photo #3"
      >
        <span>+{{ (listing().photos.length || 3) - 3 }} Photos</span>
      </div>
    </aside>
  </section>

  <section class="listing-review" [ngClass]="{ 'loading-background': isLoading() }">
    <main>
      <div>{{ listing().reviews_number | i18nPlural : reviewsMapping }}</div>
      <div>
        <span
          *ngFor="let star of reviewStars()"
          class="material-symbols-outlined listing-review__stars"
          [ngClass]="{ fill: star === 1 }"
        >
          star
        </span>
      </div>
    </main>
    <aside>
      <app-favorite-button *appHasRole="[userRole.Admin, userRole.Renter]" [listing]="listing()"></app-favorite-button>

      <button
        mat-icon-button
        [matMenuTriggerFor]="menu"
        title="Share listing"
        aria-label="Share listing to social media"
      >
        <span aria-hidden="false" aria-label="Share listing to social media" class="material-symbols-outlined">
          share
        </span>
      </button>
      <mat-menu #menu="matMenu">
        <button mat-menu-item (click)="share('facebook')" title="Share listing to Facebook" class="bookmark-listing">
          <span aria-hidden="false" aria-label="Share listing to Facebook">Facebook</span>
        </button>
        <button
          mat-menu-item
          (click)="share('twitter')"
          title="Share listing to X (Formerly Twitter)"
          class="bookmark-listing"
        >
          <span aria-hidden="false" aria-label="Share listing to Twitter">Twitter</span>
        </button>
      </mat-menu>
    </aside>
  </section>

  <section class="listing-details" [ngClass]="{ 'loading-background': isLoading() }">
    <h1>{{ listing().title }}</h1>
    <p>
      {{ listing().address[0] }}, {{ listing().address[1] }}, {{ listing().address[2] }},
      {{ listing().address[3] }}
    </p>
  </section>

  <section class="listing-description" [ngClass]="{ 'loading-background': isLoading() }">
    <p>
      {{ listing().description }}
    </p>
  </section>

  <section class="listing-amenities" [ngClass]="{ 'loading-background': isLoading() }">
    <h3>Features</h3>
    <ul>
      <li *ngFor="let feature of listing().ammenities">
        <span aria-hidden="false" aria-label="Listing ammenity" class="material-symbols-outlined">
          {{ feature.split("|")[0] }}
        </span>
        {{ feature.split("|")[1] }}
      </li>
    </ul>
  </section>
</section>

<section class="booking-container" [ngClass]="{ 'loading-background': isLoading() }">
  <app-booking-form [listing]="listing()" (onRent)="onRent($event)"></app-booking-form>
</section>
